<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>

    <style>
        section>div{
            background-color: orange;
            float: left;
            width: 300px;
            margin-left: 5px;
        }
    </style>

</head>
<body>
    <main>

    </main>

</body>
</html>
<script>
    var request = new XMLHttpRequest();
    request.open("GET","http://wthrcdn.etouch.cn/weather_mini?citykey=101180101",true);
    request.send();
    request.onreadystatechange = function () {
        if (request.readyState == 4){
            var str = request.responseText;
            var obj = JSON.parse(str);
            console.log(obj);
            var msg = obj.data;
            var content = '';
            for(var i=0; i<msg.forecast.length; i++){
                var newCon = msg.forecast[i];
                content += '<section>';
                content += '<div>';
                content += '<h2>'+msg.city+'</h2>';
                content += '<div>';
                content += '<div class="aa"><span>风向：</span><span>'+newCon.fengxiang+'</span></div>';
                content += '<div class="aa"><span>风力：</span><span>'+newCon.fengli+'</span></div>';
                content += '<div class="aa"><span>最高温度：</span><span>'+newCon.high+'</span></div>';
                content += '<div class="aa"><span>最低温度：</span><span>'+newCon.low+'</span></div>';
                content += '<div class="aa"><span>日期：</span><span>'+newCon.date+'</span></div>';
                content += '</div>';
                content += '</section>';

            }

            document.querySelector('main').innerHTML = content;
            var h2 = document.querySelectorAll('h2')[0];
            h2.innerHTML = msg.city+' '+msg.wendu+'℃'+'<br><h6>'+msg.ganmao+'</h6>';
            var yesterday = msg.yesterday;
            var div = document.createElement('div');
            var h3 = document.createElement('h3');
            var div1 = document.createElement('div');
            var div2 = document.createElement('div');
            var div3 = document.createElement('div');
            var div4 = document.createElement('div');
            var div5 = document.createElement('div');
            var div6 = document.createElement('div');
            document.querySelector('section>div').appendChild(h3);
            document.querySelector('section>div').appendChild(div);
            h3.innerHTML = '昨天';
            div.appendChild(div1);
            div.appendChild(div2);
            div.appendChild(div3);
            div.appendChild(div4);
            div.appendChild(div5);
            div.appendChild(div6);
            div1.innerHTML = '风力：'+yesterday.fl;
            div2.innerHTML = '风向：'+yesterday.fx;
            div3.innerHTML = '最高温度：'+yesterday.high;
            div4.innerHTML = '最低温度：'+yesterday.low;
            div5.innerHTML = '是否有雨：'+yesterday.type;
            div6.innerHTML = '日期：'+yesterday.type;
        }
    }





</script>
